<template>
  <!-- 轮播图 -->
  <div class="index_page">
    <div class="swiper-wrapper">
      <el-carousel
          autoplay="false"
          height="486px"
          class="el-carousel "
      >
        <el-carousel-item
            v-for="(item, index) in swiperImgList"
            :key="item.id"
        >
          <a>
            <img
                class="img"
                :src="item"
                alt=""
            >
          </a>

        </el-carousel-item>
      </el-carousel>
    </div>
  </div>

<!-- navBar导航 -->
  <div class="card-list">
    <div class="channel-list">
      <div class="list content-width">
        <div class="channel-scroll">
          <router-link class="channel-item"  active-class="active" to="/home/recommend">推荐</router-link>
          <router-link class="channel-item" active-class="active" to="/home/work">作品</router-link>
          <router-link class="channel-item"  active-class="active" to="/home/course">教程</router-link>
          <router-link class="channel-item"  active-class="active" to="/home/theme">专题</router-link>
          <router-link class="channel-item"  active-class="active" to="/home/dynamic">动态</router-link>
          <router-link class="channel-item"  active-class="active" to="/home/focus">关注</router-link>
        </div>
        <span class="channel-item right-item">
          选择兴趣技能
        </span>
      </div>
    </div>
    <!-- 视频导航 -->

    <div class="content-center">
      <div class="content">
        <router-view></router-view>
      </div>
    </div>

  </div>

  <el-dialog>

  </el-dialog>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "home",
});
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import { reqBannerList } from '@/api/home/index'
import useHomeStore from '@/stores/home'

const homeStore = useHomeStore()
// 轮播图列表
const swiperImgList = ref([])
// 推荐视频列表
const RecommendVideoList = ref([])

const getBannerList = async () =>{
  try{
    await homeStore.getBannerData()
    swiperImgList.value = homeStore.swiperImgList
  }catch (err:any){
    console.log(err.message)
  }
}

const getRecommendList = async () =>{
  try {
    await homeStore.getRecommendData(20,0)
    RecommendVideoList.value = homeStore.recommendList
    console.log()
  }catch (err:any){
    console.log(err.message)
  }
}

onMounted(()=>{
  getBannerList()
  getRecommendList()
  console.log(2222)
})
</script>

<style scoped>
.swiper-wrapper{
  background: #fff;
  padding-top: 20px;
  position: relative;
  z-index: 9;
}
.el-carousel{
  overflow-x: hidden;
  position: relative;
  margin: auto;
  width: 1200px;
}

.channel-list {
  background: #fff;
  text-align: center;
  height: 80px;
  line-height: 80px;
  color: #7d8090;
  font-size: 16px;
  overflow: hidden;
}

.channel-list .list{
  position: relative;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.channel-list .channel-scroll{
  position: relative;
  display: inline-block;
  margin: 0 auto;
  width: 1000px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.channel-scroll .active{
  color: #111;
  border-bottom: 3px solid #000;
}

.channel-scroll .channel-item:hover{
  color: #111;
}

.channel-list .channel-item{
  padding: 20px 4px;
  margin: 0 20px;
  text-align: center;
  user-select: none;
  cursor: pointer;
}

.channel-list .list .right-item {
  position: absolute;
  display: inline-block;
  right: -20px;
  top: 0;
  height: 80px;
  vertical-align: top;
  padding: 0;
}

.content-center{
  overflow-x: hidden;
  position: relative;
  margin: 20px auto;
  width: 1200px;

}


</style>
